<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test0"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <script src="../React-js/prop-types.js" type="text/javascript"></script>
    <script type="text/babel">
         class Person1 extends React.Component{
            static propTypes = {
                name:PropTypes.string.isRequired, // 必传且为字符串
                sex:PropTypes.string, // 非必传 字符串
                age:PropTypes.number, // 非必传 数字
            }
            static defaultProps = {
                sex:'男D',
                age:18
            }
            render(){
                const {name,sex,age} = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                )
            }
        }
        // 组件三大属性 函数式组件只能使用props 其他state和refs 需要使用类组件 新版本中函数式组件也可以使用state和refs（hooks）
        // 函数式组件 使用props 由于函数能够接受有参数 所以props 是函数参数
        function Person(props){
            const {name,sex,age} = props
            return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                )
        }
        // 函数式组件 限制类型也可通过propTypes进行限制
        Person.propTypes = {
            name:PropTypes.string.isRequired, // 必传且为字符串
            sex:PropTypes.string, // 非必传 字符串
            age:PropTypes.number, // 非必传 数字
        }
        Person.defaultProps = {
            sex:'男D',
            age:18
        }
        ReactDOM.render(<Person name='Tom'  age={19} sayHi={sayHi}/>,document.querySelector('#test0'))
        ReactDOM.render(<Person name='Jerry' sex='女' />,document.querySelector('#test1'))
        const p = {name:'Dog',sex:'男',age:19} // key value 相同可以简写
        ReactDOM.render(<Person {...p}/>,document.querySelector('#test2'))
        function sayHi(){
            console.log('hi');
        }
        
    </script>
</body>
</html>